<template>
  <div style="text-align: center">
    <el-form ref="form" :model="form" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="合同编号:" prop="serial">
            <el-input
              v-model="form.serial"
              class="companyInput"
              style="margin-left: -27px"
            >
              <template slot="prepend">融立第/德润第</template>
              <template slot="append">号</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务费：" prop="serviceCharge">
            <el-select v-model="form.serviceCharge" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户姓名:" prop="apply">
            <el-input v-model="form.apply"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号:" prop="card">
            <el-input v-model="form.card"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码:" prop="tel">
            <el-input v-model="form.tel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系地址:" prop="address">
            <el-input v-model="form.address"></el-input>
            <!--             <p class="company">元</p>-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预估融资金额：" prop="blm">
            <el-input v-model="form.blm" class="companyInput"></el-input>
            <p class="company">万元</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="融立合同签订时间：" prop="signDate">
            <el-date-picker
              v-model="form.signDate"
              type="date"
              placeholder="选择日期"
              style="width: 200px"
              value-format="yyyy年MM月dd日"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form ref="form" :model="form" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="融资金额：" prop="melt">
            <el-input v-model="form.melt" class="companyInput"></el-input>
            <p class="company">万元</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="本次顺位抵押：" prop="orderedPledge">
            <el-select v-model="form.orderedPledge" placeholder="请选择">
              <el-option
                v-for="item in diya"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总服务费：" prop="totalServiceCharge">
            <el-input v-model="form.totalServiceCharge" class="companyInput"></el-input>
            <p class="company">元</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="大写：" prop="sc">
            <el-input v-model="form.sc"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="前置服务费：" prop="fsm">
            <el-input v-model="form.fsm" class="companyInput"></el-input>
            <p class="company">元</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="大写：" prop="fc">
            <el-input v-model="form.fc"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分期服务费：" prop="cmy">
            <el-input v-model="form.cmy" class="companyInput"></el-input>
            <p class="company">元</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="大写：" prop="cmc">
            <el-input v-model="form.cmc"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="月付款金额：" prop="due">
            <el-input v-model="form.due" class="companyInput"></el-input>
            <p class="company">元</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="期数：" prop="rtp">
            <el-input v-model="form.rtp" class="companyInput"></el-input>
            <p class="company">期</p>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

    <el-form ref="form" :model="form" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="抵押人:" prop="loan">
            <el-input v-model="form.loan"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号码:" prop="album">
            <el-input v-model="form.album"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话:" prop="call">
            <el-input v-model="form.call"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房屋结构:" prop="chart">
            <el-input v-model="form.chart"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权利性质:" prop="nature">
            <el-input v-model="form.nature"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="建筑面积:"
            style="text-align: left"
            class="commpanyItem"
            prop="area"
          >
            <el-input v-model="form.area" style="width: 150px"></el-input>
            <p class="company">m²</p>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="不动产权证号:" prop="non" style="width: 87%">
            <el-input v-model="form.non"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="房屋坐落:" prop="site" style="width: 87%">
            <el-input v-model="form.site"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="抵押期限起:" prop="mortgageDate">
            <el-date-picker
              v-model="form.mortgageDate"
              type="date"
              placeholder="选择日期"
              style="width: 200px"
              value-format="yyyy年MM月dd日"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="抵押期限/到期时间止:" prop="expireDate" style="width:200px">
            <el-date-picker
              v-model="form.expireDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy年MM月dd日"

            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="房屋评估价值:" prop="houseValue">
            <el-input v-model="form.houseValue" class="companyInput"></el-input>
            <p class="company">万元</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="" prop="mt">
            <el-checkbox
              class="checkboxSTyle"
              v-model="form.mt"
              :true-label="1"
              :false-label="0"
            >不动产抵押表下载(需要下载请勾选)
            </el-checkbox
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="primary" style="width: 180px" @click="downloadFun(0)"
    >融资方案告知书下载
    </el-button
    >
    <el-button type="primary" style="width: 180px" @click="downloadFun(1)"
    >服务合同下载
    </el-button
    >
    <el-button type="primary" style="width: 180px" @click="downloadFun(2)"
    >保理合同下载
    </el-button
    >
    <!--    <div-->
    <!--      style="display: none"-->
    <!--      v-html="VlHtml"-->
    <!--      ref="testref"-->
    <!--      id="indexhtml"-->
    <!--      @click="indexButton($event)"-->
    <!--    ></div>-->
  </div>
</template>

<script>
import {
  postDownloadLyf,
  PostDownloadRydL,
  postDownloadDBAJf,
  getOrderTable,
  getRecordModel,
  margin
} from "../../../src/assets/js/api";

export default {
  name: "Blfw",
  props: {
    showForm: {
      type: Object
    },
    isContract: {
      type: Number
    },
    orderData: {
      type: String
    },
    dialogVisible: {
      type: Boolean
    }
  },
  data() {
    return {
      VlHtml: "", //模板字符串Html!
      form: {
        "address": "",
        "album": "",
        "amount": "",
        "apply": "",
        "area": "",
        "bai": "",
        "blm": "",
        "call": "",
        "card": "",
        "cmy": "",
        "cmc": "",
        "chart": "",
        "downloadFileType": 0,
        "due": "",
        "expireDate": "",
        "fsm": "",
        "fc": "",
        "houseValue": "",
        "kg": "",
        "lakh": "",
        "loan": "",
        "melt": "",
        "meltChinese": "",
        "mil": "",
        "more": "",
        "mortgageDate": "",
        "mt": 0,
        "nature": "",
        "non": "",
        "one": "",
        "orderNum": "",
        "orderedPledge": "",
        "orderedPledgePlus": "",
        "rtp": "",
        "serial": "",
        "serviceCharge": "",
        "signDate": "",
        "site": "",
        "tel": "",
        "ten": "",
        "totalServiceCharge": "",
        "sc": "",
        "wan": ""
      },
      options: [
        {
          value: 0,
          label: "分期"
        },
        {
          value: 1,
          label: "一次性"
        }
      ],
      diya: [
        {
          value: 0,
          label: "一抵"
        },
        {
          value: 1,
          label: "二抵"
        }
      ]
    };
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible == true) {
        this.getData();
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    //获取对应数据回显!
    async getData() {

      getOrderTable(this.orderData).then((res) => {
        var infoData = res.data;
        // this.form.month=infoData.monthMoney;//银行月还款
        this.form.orderNum = infoData.orderNumber;
        this.form.serial = infoData.contractBorrowNumber;//合同编号
        this.form.serviceCharge = infoData.serviceCharge;//服务费
        this.form.apply = infoData.basicBorrowerName;//客户姓名
        this.form.card = infoData.basicBorrowerCard;//身份证号
        this.form.tel = infoData.basicBorrowerPhone;//手机号码
        this.form.address = infoData.basicBorrowerAddress;//联系地址
        this.form.blm = infoData.basicLoansMoney;//预估融资金额
        this.form.melt = infoData.contractGuaranteeMoney;//融资金额
        this.form.orderedPledge = infoData.orderedPledge;//本次顺位抵押
        this.form.totalServiceCharge = infoData.totalServiceAmount;//总服务费
        this.form.sc = this.changeNumMoneyToChinese(infoData.totalServiceAmount);//总服务费大写
        this.form.fsm = infoData.frontServiceMoney;//前置服务费
        this.form.fc = this.changeNumMoneyToChinese(infoData.frontServiceMoney);//前置服务费大写
        this.form.cmy = infoData.chargeMoney;//分期服务费
        this.form.cmc = this.changeNumMoneyToChinese(infoData.chargeMoney);//分期服务费大写
        this.form.due = infoData.monthMoney;//月付款金额
        this.form.rtp = infoData.contractGuaranteeMonth;//期数
        this.form.loan = infoData.pledgeName;//抵押人
        this.form.album = infoData.pledgeCard;//抵押人身份证号码
        this.form.call = infoData.pledgePhone;//抵押人联系电话
        this.form.chart = infoData.houseStructure;//房屋结构
        this.form.mortgageDate = infoData.mortgageDate;//抵押期限起
        this.form.expireDate = infoData.expireDate;//抵押期限/到期时间止

        //权利性质
        if(infoData.landNature && infoData.landNatureTwo){
          this.form.nature = `${infoData.landNature}、${infoData.landNatureTwo}`;
        }else {
          this.form.nature=infoData.landNature?infoData.landNature:infoData.landNatureTwo
        }
        //建筑面积
        if(infoData.pledgeHouseArea && infoData.pledgeHouseAreaTwo){
          this.form.area = `${infoData.pledgeHouseArea}、${infoData.pledgeHouseAreaTwo}`;
        }else {
          this.form.area=infoData.pledgeHouseArea?infoData.pledgeHouseArea:infoData.pledgeHouseAreaTwo
        }
        //不动产权证号
        if(infoData.pledgeHouseNumber && infoData.pledgeHouseNumberTwo){
          this.form.non = `${infoData.pledgeHouseNumber}、${infoData.pledgeHouseNumberTwo}`;
        }else {
          this.form.non=infoData.pledgeHouseNumber?infoData.pledgeHouseNumber:infoData.pledgeHouseNumberTwo
        }
        //房屋坐落
        if(infoData.pledgeHouseAddress && infoData.pledgeHouseAddressTwo){
          this.form.site = `${infoData.pledgeHouseAddress}、${infoData.pledgeHouseAddressTwo}`;
        }else {
          this.form.site=infoData.pledgeHouseAddress?infoData.pledgeHouseAddress:infoData.pledgeHouseAddressTwo
        }
        //房屋评估价值
        if(infoData.evaluationPrice && infoData.pledgePreliminaryMoneyTwo){
          this.form.houseValue = `${infoData.evaluationPrice}、${infoData.pledgePreliminaryMoneyTwo}`;
        }else {
          this.form.houseValue=infoData.evaluationPrice?infoData.evaluationPrice:infoData.pledgePreliminaryMoneyTwo
        }


        // //抵押人姓名!
        // if (infoData.pledgeName && infoData.pledgeMateName) {
        //   this.form.loan = `${infoData.pledgeName},${infoData.pledgeMateName}`;
        // } else {
        //   if (infoData.pledgeName) {
        //     this.form.loan = infoData.pledgeName;
        //   }
        //   if (infoData.pledgeMateName) {
        //     this.form.loan = infoData.pledgeMateName;
        //   }
        // }
        // //抵押人身份证号!
        // if (infoData.pledgeCard && infoData.pledgeMateCard) {
        //   this.form.album = `${infoData.pledgeCard},${infoData.pledgeMateCard}`;
        // } else {
        //   if (infoData.pledgeCard) {
        //     this.form.album = infoData.pledgeCard;
        //   }
        //   if (infoData.pledgeMateCard) {
        //     this.form.album = infoData.pledgeMateCard;
        //   }
        // }
        // //抵押人电话!
        // if (infoData.pledgePhone && infoData.pledgeMatePhone) {
        //   this.form.call = `${infoData.pledgePhone},${infoData.pledgeMatePhone}`;
        // } else {
        //   if (infoData.pledgePhone) {
        //     this.form.call = infoData.pledgePhone;
        //   }
        //   if (infoData.pledgeMatePhone) {
        //     this.form.call = infoData.pledgeMatePhone;
        //   }
        // }
        // this.form.nature = infoData.landNature; //权利性质!
        // this.form.chart = infoData.houseStructure; //房屋结构!
      });
    },

    async downloadFun(type) {
      this.form.productType=this.showForm.productType;

      if (this.isContract == 2) {
        if(this.form.serviceCharge==null){
          this.$message.error("请选择服务费")
          return;
        }

        this.form.downloadFileType = type;
        await this.dowloadUpateForm();

        PostDownloadRydL(this.form).then((res) => {
          const lastSlashIndex = res.lastIndexOf('/');
          const lastQuestionMarkIndex = res.lastIndexOf('.');

          if (lastSlashIndex === -1 || lastQuestionMarkIndex === -1 || lastQuestionMarkIndex < lastSlashIndex) {
            return '';
          }
          const fileName = res.substring(lastSlashIndex + 1, lastQuestionMarkIndex);
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = res;
          link.setAttribute("download", fileName);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      }

    },
    formResetFields(data) {
      if (data == true) {
        this.form.signDate = "";
        this.form.serial = "";
        this.form.apply = "";
        this.form.phone = "";
        this.form.card = "";
        this.form.melt = "";
        this.form.address = "";
        this.form.month = "";
        this.form.cash = "";
        this.form.retain = "";
        this.form.big = "";
        this.form.due = "";
        this.form.sum = "";
        this.form.site = "";
        this.form.non = "";
        this.form.chart = "";
        this.form.nature = "";
        this.form.area = "";
        this.form.expireDate = "";
        this.form.loan = "";
        this.form.album = "";
        this.form.call = "";
        // this.form.tel = "";
        // this.form.retain = "";
      }
    },
    changeNumMoneyToChinese(money) {
      if (!money) {
        return "";
      }
      let cnNums = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //汉字的数字
      let cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
      let cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
      let cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
      // let cnInteger = "整"; //整数金额时后面跟的字符
      // let cnIntLast = "元"; //整型完以后的单位
      let maxNum = 999999999999999.9999; //最大处理的数字
      let IntegerNum; //金额整数部分
      let DecimalNum; //金额小数部分
      let ChineseStr = ""; //输出的中文金额字符串
      let parts; //分离金额后用的数组，预定义
      let Symbol = "";//正负值标记
      if (money == "") {
        return "";
      }

      money = parseFloat(money);
      if (money >= maxNum) {
        //alert('超出最大处理数字');
        return "";
      }
      if (money == 0) {
        // ChineseStr = cnNums[0] + cnIntLast + cnInteger;
        ChineseStr = cnNums[0];
        return ChineseStr;
      }
      if (money < 0) {
        money = -money;
        Symbol = "负 ";
      }
      money = money.toString(); //转换为字符串
      if (money.indexOf(".") == -1) {
        IntegerNum = money;
        DecimalNum = "";
      } else {
        parts = money.split(".");
        IntegerNum = parts[0];
        DecimalNum = parts[1].substr(0, 4);
      }
      if (parseInt(IntegerNum, 10) > 0) { //获取整型部分转换
        let zeroCount = 0;
        let IntLen = IntegerNum.length;
        for (let i = 0; i < IntLen; i++) {
          let n = IntegerNum.substr(i, 1);
          22, 2511, 3205;
          let p = IntLen - i - 1;
          let q = p / 4;
          let m = p % 4;
          if (n == "0") {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              ChineseStr += cnNums[0];
            }
            zeroCount = 0; //归零
            ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            ChineseStr += cnIntUnits[q];
          }
        }
        // ChineseStr += cnIntLast;
        //整型部分处理完毕
      }
      if (DecimalNum != "") { //小数部分
        let decLen = DecimalNum.length;
        for (let i = 0; i < decLen; i++) {
          let n = DecimalNum.substr(i, 1);
          if (n != "0") {
            ChineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (ChineseStr == "") {
        // ChineseStr += cnNums[0] + cnIntLast + cnInteger;
        ChineseStr += cnNums[0];
      }
      // else if (DecimalNum == "") {
      //   ChineseStr += cnInteger;
      // }
      ChineseStr = Symbol + ChineseStr;
      return ChineseStr;
    },

    //  下载时修改的表单数据
    dowloadUpateForm() {
      if (this.form.mortgageDate && this.form.expireDate) {
        let mortgageDate = this.form.mortgageDate;
        // mortgageDate = mortgageDate.split("-");
        // mortgageDate = `${mortgageDate[0]}年${mortgageDate[1]}月${mortgageDate[2]}日`;
        let expireDate = this.form.expireDate;
        // expireDate = expireDate.split("-");
        // expireDate = `${expireDate[0]}年${expireDate[1]}月${expireDate[2]}日`;
        this.form.date = `自${mortgageDate}起\n至${expireDate}止`;
      }
      if (this.form.factoring) {
        this.form.ftr = this.form.factoring / 10000;
      }
      return true;
    }


  }
};
</script>

<style scoped type="less">
.el-form {
  margin-bottom: 28px;
  padding: 22px 22px 0 22px;
  border: 1px #eee solid;
}

.el-col {
  display: flex;
  flex-wrap: wrap;
}

.company {
  float: right;
  width: 30px;
  text-align: center;
}

.companyInput {
  width: calc(100% - 30px);
}

::v-deep .commpanyItem .el-form-item__content {
  width: 180px;
}

.hetongtd {
  width: 650px;
  height: 40px;
  border: 1px #eee solid;
}

.hetongtr {
  width: 100%;
  border: 1px red solid;
}

.hetongInput {
  width: 100px;
  height: 20px !important;
  border: 1px rgba(0, 0, 0, 0) solid;
}

.hetongTit {
  line-height: 40px;
  float: left;
  width: 30%;
  height: 40px;
  border-right: 1px #eee solid;
}

.hetongContent {
  float: left;
  width: 65%;
  text-align: center;
}

.hetongContent ::v-deep.el-input__inner {
  height: 35px;
  border: 1px rgba(0, 0, 0, 0) solid;
}

table {
  width: 100%;
}

.el-radio {
  line-height: 40px;
}

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: red;
  border-color: red;
}

/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: red;
}

/deep/ .checkboxSTyle .el-checkbox__input .el-checkbox__inner {
  border: 2px solid red;
}

/deep/ .el-checkbox__label {
  font-size: 15px;
  color: red;
}

/deep/ .el-checkbox {
  margin-left: -30%;
  font-weight: 600;
}

/* /deep/ .el-checkbox__input.is-checked .el-check */

</style>
